<template>
	<view>
		<view class="bgf px-15 borderTop30">
			<view class="disFlxJS linh-44 borderB">
				<view class="fw-6 fz-15">数据总览</view>
				<view class="disFlxAC" @click="openSelectDay">
					<u-icon name="calendar-fill" :size="20" />
					<text class="colorZS pr-10 pl-5">{{ dayList[defaultValue] }}</text>
					<u-icon name="arrow-down" :size="12" />
				</view>
			</view>
			<view class="grid py-30">
				<view class="tc linh-24">
					<view>已通过</view>
					<view class="fw-6">{{ info.approvedNum || 0 }}</view>
				</view>
				<view class="tc linh-24">
					<view>待审核</view>
					<view class="fw-6">{{ info.approvingNum || 0 }}</view>
				</view>
				<view class="tc linh-24">
					<view>已驳回</view>
					<view class="fw-6">{{ info.refuseNum || 0 }}</view>
				</view>
				<view class="tc linh-24">
					<view>病种数</view>
					<view class="fw-6">{{ info.diseaseNum || 0 }}</view>
				</view>
				<view class="tc linh-24">
					<view>患者数</view>
					<view class="fw-6">{{ info.patientNum || 0 }}</view>
				</view>
			</view>
		</view>

		<view class="bgf px-15 borderTop30">
			<view class="fw-6 linh-44 borderB">用户画像</view>
			<view class="py-10  borderB">
				<view class="fw-6 label">性别分析</view>
        <view class="disFlxAC">
          <view class="lumpBox">
            <view class="lump" style="background-color: #20D19A;"></view>
            <view class="fz-10 color8 pt-2">男（{{info.malePatientNum || 0}}人）</view>
            <view class="lump mt-20" style="background-color: #f7b2b2;"></view>
            <view class="fz-10 color8 pt-2">女（{{info.feMalePatientNum || 0}}人）</view>
          </view>
          <view class="pieBox" :style="sexPieStyle"></view>
        </view>
			</view>
			<view class="py-10 borderB">
				<view class="fw-6 label">年龄统计</view>
				<view class="disFlxAC">
          <view class="lumpBox">
            <view class="lump" style="background-color: #20D19A;"></view>
            <view class="fz-10 color8 pt-2">18岁以下（{{info.underEighteenYearsOldNum || 0}}人）</view>
            <view class="lump mt-8" style="background-color: #f9ae3d;"></view>
            <view class="fz-10 color8 pt-2">18~60岁（{{info.otherYearsOldNum || 0}}人）</view>
            <view class="lump mt-8" style="background-color: #5ac725;"></view>
            <view class="fz-10 color8 pt-2">60岁以上（{{info.aboveSixtyYearsOldNum || 0}}人）</view>
          </view>
          <view class="pieBox" :style="agePieStyle"></view>
        </view>
			</view>
			<view class="pt-10 pb-20">
				<view class="fw-6 label">疾病排名</view>
				<view class="disFlxJS">
					<view class="cell1 shrink0 tc linh-40">排名</view>
					<view class="cell2 shrink0 tc linh-40">疾病名</view>
					<view class="cell3 shrink0 tc linh-40">疾病次数</view>
				</view>
				<view v-for="(item, index) in info.diseaseCharts" :key="index" class="disFlxJS borderT">
					<view class="cell1 shrink0 tc linh-40" style="color: #bb9313">{{ index + 1 }}</view>
					<view class="cell2 shrink0 tc linh-40">{{ item.diseaseName }}</view>
					<view class="cell3 shrink0 tc linh-40">{{ item.apCount }}</view>
				</view>
        <view v-if="info.diseaseCharts && !info.diseaseCharts.length" style="padding: 100rpx 0;">
          <view class="tc color9">暂无疾病</view>
        </view>
			</view>
		</view>

    <DaySelect ref="DaySelect" :defaultValue="defaultValue" @change="dayChange" />
	</view>
</template>

<script>
import expApi from "@/api/expertIdentity.js";
import DaySelect from './daySelect';
import dayjs from 'dayjs';

export default {
  components: {
    DaySelect
  },
	data() {
		return {
      defaultValue: 0,
			dayList: ["今天", "昨天", "本周", "本月", "截止累计"],

      getParams: {
        startTime: "",
        endTime: ""
      }, 

			info: {
        patientNum: 0,  // 患者数
        malePatientNum: 0, // 男性患者数
        feMalePatientNum: 0, // 女性患者数
        underEighteenYearsOldNum: 0, // 18岁以下
        otherYearsOldNum: 0, // 18-60岁
        aboveSixtyYearsOldNum: 0, // 60岁以上
      },
      sexPieStyle: `background: conic-gradient(#20D19A 0 50%,#f7b2b2 50% 100%);`,
      agePieStyle: `background: conic-gradient(#20D19A 0 34%,#f9ae3d 34% 67%,#5ac725 67% 100%);`
		};
	},
	onLoad() {
		this.dayChange(this.defaultValue);
	},
	methods: {
		async getData() {
			const { data } = await expApi.getStatistics(this.getParams);
			this.info = data;

      if(this.info.patientNum){
        // 获取男性在总人数总的百分比, 设置圆形中男性的结束坐标,和女性的开始坐标
        const manEndCoord = Math.round(this.info.malePatientNum / this.info.patientNum * 10000) / 100.00 + "%";
        this.sexPieStyle = `background: conic-gradient(#20D19A 0 ${manEndCoord},#f7b2b2 ${manEndCoord} 100%);`

        // 获取18岁以下在总人数总的百分比, 设置圆形中18岁以下的结束坐标,和18-60岁的开始坐标
        const eighteenCoord = Math.round(this.info.underEighteenYearsOldNum / this.info.patientNum * 10000) / 100.00 + "%";
        // 获取18-60岁在总人数总的百分比, 设置圆形中18-60岁的结束坐标,和60岁以上的开始坐标
        const middleAgeCoord = Math.round(this.info.otherYearsOldNum / this.info.patientNum * 10000) / 100.00 + "%";
        this.agePieStyle = `background: conic-gradient(#20D19A 0 ${eighteenCoord},#f9ae3d ${eighteenCoord} ${middleAgeCoord},#5ac725 ${middleAgeCoord} 100%);`
      }
		},

    openSelectDay() {
      this.$refs.DaySelect.openModal()
    },
    dayChange(index) {
      this.defaultValue = index;
      switch (index) {
        case 0:
          // 今天
          this.getParams = {
            startTime: dayjs().format("YYYY-MM-DD 00:00:00"),
            endTime: dayjs().format("YYYY-MM-DD 23:59:59")
          }
          break;
        case 1:
          // 昨天
          this.getParams = {
            startTime: dayjs().subtract(1,'day').format("YYYY-MM-DD 00:00:00"),
            endTime: dayjs().subtract(1,'day').format("YYYY-MM-DD 23:59:59")
          }
          break;
        case 2:
          // 本周
          let day = dayjs().day();
          this.getParams = {
            startTime: dayjs().subtract(day-1, 'day').format("YYYY-MM-DD 00:00:00"),
            endTime: dayjs().format("YYYY-MM-DD 23:59:59")
          }
          break;
        case 3:
          // 本月
          let date = dayjs().date();
          this.getParams = {
            startTime: dayjs().subtract(date-1, 'day').format("YYYY-MM-DD 00:00:00"),
            endTime: dayjs().format("YYYY-MM-DD 23:59:59")
          }
          break;
        default:
          this.getParams = {
            startTime: "",
            endTime: ""
          }
          break;
      }

      this.getData();
    }
	},
};
</script>

<style lang="scss" scoped>
.grid {
	display: grid;
	gap: 30rpx;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lumpBox{
  width: 240rpx;
  flex-shrink: 0;
  padding-right: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .lump{
    width: 60rpx;
    height: 30rpx;
    border-radius: 8rpx;
  }
}
.pieBox {
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
}

.label {
	color: #bb9313;
	border-left: solid 6rpx #bb9313;
	padding-left: 10rpx;
}
.cell1 {
	width: 20%;
}
.cell2 {
	width: 60%;
	padding: 0 20rpx;
}
.cell3 {
	width: 20%;
}
</style>
